<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore } from '@/stores';
const store = useUserStore();
const email = ref('');
const nickname = ref('');
const password = ref('');
const checkPassword = ref('');
const goRegister = async () => {
  console.log(email.value, nickname.value, password.value, checkPassword.value);
  const result = await store.userRegister({
    email: email.value.trim(),
    nickname: nickname.value.trim(),
    password: password.value.trim(),
    type: 1,
  });
  console.log(result, '注册');
};
</script>

<template>
  <div class="register-page index-content">
    <div class="flex items-center justify-center px-2.5 md:px-6">
      <div class="w-full max-w-xl text-center mt-4 mb-12">
        <div class="mb-14">
          <div>
            <b class="mb-10 block text-xl font-bold"> FileQX </b>
          </div>
          <h1 class="mb-0.5 text-3xl font-extrabold md:text-4xl">建立新帐户</h1>
          <h2 class="text-xl font-normal md:text-2xl">请填写注册以创建帐户</h2>
        </div>
        <form class="mb-12 space-y-4 text-left">
          <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
            <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> 电子邮件: </label>
            <div class="w-full text-left">
              <input
                v-model="email"
                placeholder="输入您的电子邮件"
                type="email"
                class="input-color dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
              />
            </div>
          </div>
          <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
            <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> 全名: </label>
            <div class="w-full text-left">
              <input
                v-model="nickname"
                placeholder="输入您的全名"
                type="text"
                class="input-color dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
              />
            </div>
          </div>
          <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
            <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> 创建密码: </label>
            <div class="w-full text-left">
              <input
                v-model="password"
                placeholder="新密码"
                type="password"
                class="input-color dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
              />
            </div>
          </div>
          <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
            <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> 确认密码: </label>
            <div class="w-full text-left">
              <input
                v-model="checkPassword"
                placeholder="确认您的新密码"
                type="password"
                class="input-color dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
              />
            </div>
          </div>
          <div class="text-center">
            <p class="mx-auto mt-12 mb-6 w-96 font-bold">
              点击“创建帐户”按钮即表示我同意
              <a href="/page/terms-of-service" class="text-theme" target="_blank"> Terms of Service </a> 和
              <a href="/page/privacy-policy" class="text-theme" target="_blank"> Privacy Policy </a>。
            </p>
            <button
              @click="goRegister"
              class="btn-border group mx-auto inline-block flex items-center whitespace-nowrap rounded-lg border-2 border-black px-7 py-2.5 dark:border-gray-300 w-full justify-center md:w-min"
            >
              <span class="pr-1 text-lg font-extrabold"> 创建帐号 </span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20px"
                height="20px"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="vue-feather text-theme -mr-1 feather feather-chevron-right"
              >
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </button>
          </div>
        </form>
        <span class="block"
          >你有没有账号？ <router-link to="/login" class="text-theme font-bold"> 登入 </router-link></span
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/register.scss';
</style>
